<template>
  <div class="amap-wrapper">
    <el-amap
      class="amap-box"
      vid="amapDemo"
      :center="center"
      :zooms="zooms"
      :zoom="zoom"
      :events="events"
    >
      <!-- 中心点 -->
      <el-amap-circle-marker vid="center" :center="center" :radius="radiusNum"></el-amap-circle-marker>

      <!-- 下面的click事件绑定不上去，events事件暂时没办法获取marker对象的参数，就是说目前没办法确定每个点的信息 -->
      <el-amap-marker
        vid="index"
        :clickable="clickAble"
        v-for="(marker, index) in peopleDetails"
        :key="index"
        :position="marker.position"
        :event="markerEvents"
        @click="handleClick(marker)"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
/* // 导入组件
import headerComponent from "./head.vue"; */

// 导出模块
export default {
  // 模块名字
  name: "MapResult",
  // 模块数据
  data() {
    //数据
    return {
      clickAble: true,
      radiusNum: 13,
      zoom: 3, //默认缩放范围
      zooms: [13, 19], //缩放范围，最广为3
      center: [113.940025, 22.524648], //中心点位置
      events: {
        init: o => {
          console.log(o.getCenter());
          o.getCity(result =>  {
            console.log(result),500
          });
        },
        click: e => {
          console.log(2);
        },
        zoomchange: () => {
            },
      },
      markerEvents: {
        click: e =>  {
          console.log(e);
          console.log(1);
        },
        zoomchange: () => {
            },
        },
      //本地模拟数据点
      peopleDetails: []
    };
  },
  // 注册组件
  components: {
    /* headerComponent */
  },
  methods: {
    handleClick(marker) {
      console.log(1);
      console.log(marker.Name);
      console.log(marker.ID);
      console.log(marker.Score);
      console.log(marker.Task);
    }
  },
  activated() {
    if(JSON.parse(localStorage.getItem("userOrderVo")).longitude!=null&&JSON.parse(localStorage.getItem("userOrderVo")).latitude!=null){
    this.center = [
      JSON.parse(localStorage.getItem("userOrderVo")).longitude,
      JSON.parse(localStorage.getItem("userOrderVo")).latitude
    ]
    };
    //console.log("SADAWDASA"+this.center);
    for (
      let j = 0;
      j < JSON.parse(localStorage.getItem("Receiving")).length;
      j++
    ) {
      let obj1 = {
        position: [
          JSON.parse(localStorage.getItem("Receiving"))[j].longitude,
          JSON.parse(localStorage.getItem("Receiving"))[j].latitude
        ],
        Name: JSON.parse(localStorage.getItem("Receiving"))[j].resName,
        ID: JSON.parse(localStorage.getItem("Receiving"))[j].jobNumber,
        Score: JSON.parse(localStorage.getItem("Receiving"))[j].score,
        Task: JSON.parse(localStorage.getItem("Receiving"))[j].notAllocateNumber
      };
      this.peopleDetails.push(obj1);
    }
  }
};
</script>

<style scoped>
.amap-wrapper {
  width: 100%;
  height: 100%;
}
</style>
